<template>
  <div>
    <template v-for="item of list">
      <el-submenu
        :index="item[props.path]"
        v-if="item[props.children] && item[props.children].length"
        :key="item[props.path]"
      >
        <template slot="title">
          <!-- <i :class="item.icon"></i> -->
          <!-- 用<i>包裹一层，是为了直接使用element原有的样式 -->
          <i
            :class="
              `el-icon-${item[props.icon]} el-icon-${item[props.parentid]}`
            "
            v-if="item[props.icon]"
            ><elan-svg :icon="item[props.icon]"></elan-svg
          ></i>
          <span slot="title">{{ item[props.title] }}</span>
        </template>
        <menu-tree :list="item[props.children]" :props="props"></menu-tree>
        <!--递归调用-->
      </el-submenu>
      <el-menu-item :index="item[props.path]" v-else :key="item[props.path]">
        <i :class="`el-icon-${item[props.icon]}`" v-if="item[props.icon]"
          ><elan-svg :icon="item[props.icon]"></elan-svg
        ></i>
        <span slot="title">{{ item[props.title] }}</span>
        <el-badge class="mark" :value="12" v-if="showBadge(item)"
          ><span slot="title">{{ item[props.title] }}</span></el-badge
        >
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "MenuTree",
  data() {
    return {
      // nameList: ["资源转移申请", "协同申请", "协作人申请"],
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => {
        return {
          path: "path",
          icon: "icon",
          children: "permissionChildList",
          title: "title",
          parentid: "parentid",
        };
      },
    },
  },
  mounted() {},
  methods: {
    // 数字标记
    showBadge(item) {
      // 确定某个二级菜单是否显示数字标记
      // if (this.nameList.includes(item.name)){
      //   // 确定数值
      //   // console.log("数字标记",item);
      //   return true;
      // }
      return false;
    },
  },
};
</script>

<style lang="less">
.elan-menu.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.elan-menu.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}

.elan-menu.el-menu--collapse > div > .el-submenu-item span {
  display: none;
}

/* 水平样式 */
.elan-menu.el-menu--horizontal > div > .el-submenu {
  float: left;
}
/* 一级菜单的样式 */
.elan-menu.el-menu--horizontal > div > .el-menu-item {
  float: left;
  height: 64px;
  line-height: 64px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;
}
/* 解决 下拉三角图标 */
.elan-menu.el-menu--horizontal > div > .el-submenu .el-submenu__icon-arrow {
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: 0px;
}
/* 解决 无下拉菜单时 不对齐问题 */
.elan-menu.el-menu--horizontal > div > .el-submenu .el-submenu__title {
  height: 64px;
  line-height: 64px;
  border-bottom: 2px solid transparent;
  color: #909399;
}
.elan-menu .el-submenu .el-menu-item {
  min-width: 0 !important;
  .el-badge {
    position: absolute;
    left: 140px;
    top: 5px;
  }
}
.elan-menu .el-icon-arrow-down:before {
  vertical-align: -4px;
}
</style>
